<template>
    <div class="user-details">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="20">
                        <div>
                            <span class="border-left"></span>
                            用户详情
                        </div>
                    </Col>
                    <Col :span="4">
                        <div class="back">
                            <span class="back-btn" @click="back">
                                <Icon type="ios-arrow-back" />
                                返回
                            </span>
                            
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content" v-if="data">
                <div class="user-info">
                    <div class="img-box">
                        <img src="../../assets/img/logo.png" alt="">
                        <p class="userId">{{data.account}}</p>
                    </div>
                    <div class="user-info-list">
                        <div class="col-15">
                            <p class="one">用户ID</p>
                            <p class="one">昵称</p>
                            <p class="one">性别</p>
                            <p class="one">联系方式</p>
                            <p class="one">城市</p>
                        </div>
                        <div class="col-35">
                            <p class="one">{{data.id}}</p>
                            <p class="one">{{data.name ? data.name : '未知'}}</p>
                            <p class="one">{{data.sex === '1' ? '男' : '女'}}</p>
                            <p class="one">{{data.phone ? data.phone : '未知'}}</p>
                            <p class="one">{{data.userAddress.length > 0 ? data.userAddress[0].address : '未知'}}</p>
                        </div>
                        <div class="col-15">
                            <p class="one">地址</p>
                            <p class="one">注册时间</p>
                            <p class="one"></p>
                            <p class="one"></p>
                            <p class="one"></p>
                        </div>
                        <div class="col-35">
                            <p class="one">{{data.userAddress.length > 0 ? data.userAddress[0].address_detail : '未知'}}</p>
                            <p class="one">{{data.create_time ? data.create_time : '未知'}}</p>
                            <p class="one"></p>
                            <p class="one"></p>
                            <p class="one"></p>
                        </div>
                    </div>
                </div>

                <div class="statistical">
                    <!-- <Icon type="ios-bookmark" /> -->
                    <Card style="width:100%">
                        <p slot="title">
                            <Icon type="ios-bookmark"></Icon>
                            统计信息
                        </p>
                        <el-table
                            :data="tableData"
                            size="mini"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="consume"
                                label="消费金额"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="orders"
                                label="发单数量"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="user_orders"
                                label="接单数量"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="user_close"
                                label="取消数量"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                label="可用余额"
                                align="center">
                                <template slot-scope="scope">
                                    <p>{{$route.params.balance}}</p>
                                </template>
                            </el-table-column>
                        </el-table>
                    </Card>
                </div>

                <div class="address-list">
                    <Card style="width:100%">
                        <p slot="title">
                            <Icon type="ios-paper-plane" />
                            地址管理
                        </p>
                        <el-table
                            :data="addressData"
                            size="mini"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="name"
                                label="姓名"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="phone"
                                label="手机号码"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                label="详细地址"
                                align="center"
                                min-width="200">
                                <template slot-scope="scope">
                                    <p>{{scope.row.address + scope.row.address_detail}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="create_time"
                                label="创建时间"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                label="默认地址"
                                align="center">
                                <template slot-scope="scope">
                                    <i :class="scope.row.is_default === '0' ? 'el-icon-error' : 'el-icon-success green'"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </Card>
                </div>

                <div class="order-list">
                    <Card style="width:100%">
                        <p slot="title">
                            <Icon type="md-list" />
                            订单记录
                        </p>
                        <el-table
                            :data="orderData"
                            size="mini"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="order_no"
                                label="订单编号"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="create_time"
                                label="提交时间"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="pub_uid"
                                label="发单人账号"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="orderUsers"
                                label="接单人数"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="title"
                                label="订单标题"
                                align="center">
                            </el-table-column>

                            <!-- <el-table-column
                                label="服务类型"
                                align="center">
                            </el-table-column> -->
                            <el-table-column
                                prop="price"
                                label="订单金额"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="pay_way"
                                label="支付方式">
                                <template slot-scope="scope">
                                    <p>{{scope.row.pay_way === '0' ? '支付宝' : '微信'}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="订单类型">
                                <template slot-scope="scope">
                                    <p>{{(scope.row.type === '1' ? '即时-' : '预约-') + (scope.row.mode === '1' ? '单人订单' : '多人订单')}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="订单状态">
                                <template slot-scope="scope">
                                    <p>{{scope.row.status === '0' ? '待支付' : scope.row.status === '1' ? '待服务' : scope.row.status === '2' ? '服务中' : scope.row.status === '3' ? '待评价' : scope.row.status === '4' ? '已完成' : '已关闭'}}</p>
                                </template>
                            </el-table-column>
                        </el-table>
                    </Card>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
</template>

<script>
    import * as api from '@/api/api';
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                id: this.$route.params.userId,
                data:null,
                tableData: [],
                addressData: [],
                orderData: []
            }
        },
        mounted(){
            this.getUserData()
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            back() {
                this.$router.back()
            },

            getUserData() {
                if(!this.$route.params.userId) {
                    this.$router.back()
                }
                this.loading.isLoading = true;
                let body = {
					model: 'Users',
					with: {
                        0: 'userAddress'
                    },
					offset: 0,
					limit: 10,
					orderBy: '',
					condition: {
						id: this.id
					},
					search: {}
                }
                
                api.getDataList(body).then(res => {
                    if(res.data.code === 200) {
                        this.data = res.data.data.data[0];
                        this.addressData = res.data.data.data[0].userAddress;
                        this.getInfoData()
                    }
                })
            },

            getInfoData() {
                let body = {
                    uid: this.id
                };
                api.userInfo(body).then(res => {
                    if(res.data.code === 200) {
                        this.tableData.push(res.data.data);
                        this.getOrderData();
                    }
                })
            },

            getOrderData() {
                let body = {
                    model: 'Orders',
                    with: {
                        0: 'orderUsers'
                    },
                    offset: 0,
                    limit: 10,
                    orderBy: '',
                    condition: {
                        status: '1'
                    },
                    search: {}
                }
                api.getDataList(body).then(res => {
                    if(res.data.code === 200) {
                        this.orderData = res.data.data.data;
                        this.loading.isLoading = false;
                    }
                })
            }
        }  
    }
</script>


<style lang="less">
@import '../../assets/styles/constant.less';
    .user-details{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
            .back{
                text-align: right;
                color: #999;
                .back-btn{
                    cursor: pointer;
                    background-color: #fff;
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                }
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .user-info{
                border: 1px solid #ddd;
                width: 100%;
                display: flex;
                background-color: #F9FAFC;
                .img-box{
                    width: 220px;
                    height: 205px;
                    overflow: hidden;
                    text-align: center;
                    padding: 10px;
                    img{
                        width: 50%;
                        margin: auto;
                    }
                    .userId{
                        margin-top: 40px;
                        font-size: 16px;
                    }
                }
                .user-info-list{
                    flex: 1;
                    display: flex;
                    .col-15{
                        width: 15%;
                        height: 100%;
                        text-align: right;
                        background-color: #F9FAFC;
                    }
                    .col-35{
                        width: 35%;
                        height: 100%;
                        background-color: #fff;
                    }
                    .one{
                        height: 20%;
                        line-height: 40px;
                        border-left: 1px solid #ddd;
                        padding: 0 20px;
                    }
                    .one:not(:last-of-type){
                        border-bottom: 1px solid #ddd;
                    }
                }
            }
            .statistical{
                width: 100%;
                margin-top: 20px;
                .el-table th{
                    background-color: #F9FAFC;
                    color: #333;
                    font-size: 14px;
                }
            }
            .address-list{
                width: 100%;
                margin-top: 20px;
                .el-table th{
                    background-color: #F9FAFC;
                    color: #333;
                    font-size: 14px;
                }
                .green {
                    color: #67C23A;
                    font-size: 16px;
                }
            }
            .order-list{
                width: 100%;
                margin-top: 20px;
                .el-table th{
                    background-color: #F9FAFC;
                    color: #333;
                    font-size: 14px;
                }
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>